//首页侧边导航栏
.navbar{
    padding: 5px;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 55px;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    height: 100%;
    width: 190px;
    overflow: hidden;
    overflow-y: scroll;
    background-color: #fff;
    border-right: 1px solid #e5e6e6;
    z-index: 3;

    //左侧导航栏图标和对应标题组成盒子
    .navbar-item{
        margin-top: 10px;
        padding: 8px 20px;
        width: 150px;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
        line-height: 30px;
        background-color: #fff;

    //左侧导航栏图标的外层盒子
    .icon-size{
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 30px;
        height: 30px; 
        background-color: #f6f7fa;
    }

    //左侧导航栏图标对应标题
    .font-size{
        padding: 0 5px;
        display: flex;
        font-size: 14px;
    }
    }

    //添加点击事件:左侧导航栏单项被点击时改变颜色
    .navbar-item.active {
        background-color: #EEEEEE;
        border-radius: 5px;
    }

    //当父级navbar-item被点击时，同时改变内部子级icon-size背景颜色
    .navbar-item.active .icon-size {
        background: linear-gradient(to top right, rgb(240, 114, 182), 50% , rgb(255, 248, 134));
  }


    //左侧导航栏图标和对应标题组成盒子鼠标悬停效果
    .navbar-item:hover{
        margin: 10px 5px 0 5px;
        border-radius: 5px;
        background-color: #EEEEEE;
        transition: 0.3s;
        cursor: pointer;
    }

    //左侧导航栏模块标题
    .navtitle{
        padding: 15px 20px 10px 20px;
        font-size: 14px;
        color: #202020;
        font-weight: bold;
    }

}

    //弹出框整体
    ::ng-deep .ant-modal-content{
        padding: 20px;
        border-radius: 20px;
        height: 470px;
        background: linear-gradient(to top right, rgb(0, 219, 222), 50% , rgb(249, 2, 255));
        //标题
        .popup-title{
            font-size: 30px;
            font-weight: bold;
            color: white;
        }

        .popup-p{
            font-size: 16px;
            color: white;
        }

        .erweima-img{
            margin-top: 55px;
            width: 200px;
            border-radius: 10px;
            background-color: #fff;
        }

    }

    //弹出框顶部修改
    ::ng-deep .ant-modal-header{
        padding: 0;
        border: 0;
    }

    //弹出框底部修改
    ::ng-deep .ant-modal-footer{
        padding: 0;
        border: 0;
    }

    //定义左侧导航栏滚动条样式
    ::-webkit-scrollbar {
        border-radius: 5px;//定义滚动条圆角
    }

//首页顶部 网站logo,账号注册及登录
.main-top{
    padding: 0 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    width: 100%;
    height: 55px;
    box-sizing: border-box;
    border-bottom: 1px solid #e5e6e6;
    z-index: 5;
    background-color: #fff;

    //待确定logo
    .logo-content{
        display: flex;
        align-items: center;
        cursor: pointer;

        .logo-name{
            display: flex;
            padding: 0 10px;
        }
    }

    //logo鼠标悬停效果
    .logo-content:hover{
        opacity: 0.8;
    }

    .login-box{
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 32px;
        border-radius: 10px;
    }

    .login-box:hover{
        display: flex;
        align-items: center;
        cursor: pointer;
        height: 32px;
        border-radius: 10px;
        background-color: #EEEEEE;
    }

}